<template>
	<div class="task_tabs_item" v-if="myTaskList && myTaskList.length > 0">
		<template v-for="item in myTaskList" :key="item">
			<!-- 未开始 -->
			<template v-if="item.type == '1'">
				<div class="item-box">
					<div class="font_start">未完成</div>
					<el-card shadow="never" class="m-t10" v-if="item.list?.length > 0">
						<div class="divheight">
							<div
								class="not_started"
								v-for="sonItem in item.list"
								:key="sonItem"
							>
								<el-card
									class="box-card w300"
									style="
										cursor: pointer;
										background-color: #f9f9ff;
										border-color: #f9f9ff;
									"
									@click="urlChange"
									shadow="never"
								>
									<p class="name">{{ sonItem.taskName }}</p>
									<p class="time">
										<el-icon><Timer /></el-icon>{{ sonItem.planEndTime }}截止
										<svg-icon
											v-if="sonItem.overdueStatus == '1'"
											icon-class="project_maturity"
										/>
									</p>
									<p
										class="project"
										:style="{
											borderRadius: '5px',
											textAlign: 'center',
											backgroundColor: `${item.color}`,
											color: '#fff',
										}"
									>
										{{ sonItem.projectName }}
									</p>
								</el-card>
							</div>
						</div>
					</el-card>
					<el-empty v-else description="暂无数据" class="m-t10 px-20" />
				</div>
			</template>
			<!-- 进行中 -->
			<template v-if="item.type == '2'">
				<div class="item-box">
					<div class="font_start">进行中</div>
					<el-card shadow="never" class="m-t10" v-if="item.list?.length > 0">
						<div class="divheight">
							<div
								class="in_progress"
								v-for="sonItem in item.list"
								:key="sonItem"
							>
								<el-card
									class="box-card w300"
									style="
										cursor: pointer;
										background-color: #fff9f5;
										border-color: #fff9f5;
									"
									shadow="never"
									@click="urlChange"
								>
									<p class="name">{{ sonItem.taskName }}</p>
									<p class="time">
										<el-icon><Timer /></el-icon>{{ sonItem.planEndTime }}截止
										<svg-icon
											v-if="sonItem.overdueStatus == '1'"
											icon-class="project_maturity"
										/>
									</p>
									<p
										class="project"
										:style="{
											borderRadius: '5px',
											textAlign: 'center',
											backgroundColor: `${item.color}`,
											color: '#fff',
										}"
									>
										{{ sonItem.projectName }}
									</p>
								</el-card>
							</div>
						</div>
					</el-card>
					<el-empty v-else description="暂无数据" class="m-t10 px-20" />
				</div>
			</template>
			<!-- 已完成	-->
			<template v-if="item.type == '3'">
				<div class="item-box">
					<div class="font_start">已完成</div>
					<el-card shadow="never" class="m-t10" v-if="item.list?.length > 0">
						<div class="divheight">
							<div
								class="have_completed"
								v-for="sonItem in item.list"
								:key="sonItem"
							>
								<el-card
									class="box-card w300"
									style="
										cursor: pointer;
										background-color: #e9f6fe;
										border-color: #e9f6fe;
									"
									@click="urlChange"
									shadow="never"
								>
									<p class="name">{{ sonItem.taskName }}</p>
									<p class="time">
										<el-icon><Timer /></el-icon>{{ sonItem.planEndTime }}截止
										<svg-icon
											v-if="sonItem.overdueStatus == '1'"
											icon-class="project_maturity"
										/>
									</p>
									<p
										class="project"
										:style="{
											borderRadius: '5px',
											textAlign: 'center',
											backgroundColor: `${item.color}`,
											color: '#fff',
										}"
									>
										{{ sonItem.projectName }}
									</p>
								</el-card>
							</div>
						</div>
					</el-card>
					<el-empty v-else description="暂无数据" class="m-t10 px-20" />
				</div>
			</template>
		</template>
	</div>
</template>

<script setup>
import { Timer } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElEmpty, ElCard, ElIcon } from "element-plus";

const props = defineProps({
	myTaskList: {
		type: Array,
		default: () => {
			return [];
		},
	},
});

let router = useRouter();
let urlChange = () => {
	let path = "/constructionProjectManage/ProjectImplementationTask";
	router.push({
		path: path,
	});
};
</script>

<style lang="scss" scoped>
@import "./my_task.scss";
</style>
